<template>
	<view class="group-pro-item" :style="[proStyle]" @click="goProductDetail">
		<view class="item-left">
			<image :style="{borderRadius: proStyle.imRadius, width: '120rpx'}" :src="info.image" mode="widthFix" />
		</view>
		<view class="item-right">
			<view class="pro-text" :style="{color: proStyle.textColor}">
				{{ info.fullName }}
			</view>
			<view v-if="!info.shopPrice" class="color3 pro-price">
				已售罄
			</view>
			<view class="pro-price" v-else>
				<view class="price" v-if="!info.vipPrice">
					{{ info.shopPrice }}
				</view>
				<view v-else class="vip-price inline-flex font-26">
					<image class="ident" src="@/static/vip.png" mode="" />
					<view class="text">
						<text class="font-22">￥</text>
						<text class="ml-6">{{info.vipPrice}}</text>
					</view>
				</view>
				<view class="profit-model" v-if="info.surplusAmount || info.pointAmount">
					<view class="inline-flex">
						<image class="p-xxd-01" :src="`${imgBaseUrl}p_xdd_01.png`" mode="heightFix" />
					</view>
					<view class="inline-flex point-amount" v-if="info.pointAmount">
						<text>积分</text>
						<text class="point-value">{{info.pointAmount || '0.00'}}</text>
					</view>
					<view class="inline-flex surplus-amount" v-if="info.surplusAmount">
						<text>余额</text>
						<text class="surplus-value">{{info.surplusAmount || '0.00'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgBaseUrl: this.IMG_BASE_URL
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			proStyle: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			goProductDetail() {
				uni.navigateTo({
					url: `/pagesProduct/productDetail/index?id=${this.info.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-pro-item {
		display: inline-flex;
		width: 710rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		align-items: center;
	}

	.item-left {
		display: inline-flex;
		width: 120rpx;
		height: 120rpx;
	}
	.item-right{
		display: inline-flex;
		flex: 1;
		flex-wrap: wrap;
		font-size: 24rpx;
		margin-left: 20rpx;
	}
	.pro-text {
		width: 100%;
	}
	.pro-price{
		width: 100%;
		margin-top: 10rpx;
		.price{
			display: inline-block;
			color: $price-color;
			font-size: 32rpx;
			&::before{
				content: '¥';
				margin-right: 4rpx;
				font-size: 24rpx;
			}
		}
		.integral-model{
			color: $price-color;
			display: inline-block;
		}
		.ml-4{
			margin-left: 4rpx;
		}
	}
	.g-integral{
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		color: $price-color;
		.ml-4{
			margin-left: 6rpx;
		}
	}
	.vip-price {
		border-radius: 8rpx;
		background: linear-gradient(103deg, #FB9DBB 0%, #F0DFCB 0%, #F2CEAC 97%);
	
		.ident {
			width: 135rpx;
		}
	
		.text {
			padding: 2rpx 18rpx 2rpx 10rpx;
		}
	}
</style>